import React from 'react';
import { Card, Descriptions, Space, Badge, Tag } from 'antd';
import {
  InfoCircleOutlined,
  EnvironmentOutlined,
  CalendarOutlined,
  TeamOutlined,
  CrownOutlined,
  UserOutlined,
  FileTextOutlined
} from '@ant-design/icons';

const NetworkInfoSection = ({ network, userRole }) => {
  // 格式化日期
  const formatDate = (dateString) => {
    return new Date(dateString).toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  return (
    <Card className="info-section" style={{ minHeight: '400px' }}>
      <div className="section-header">
        <div className="section-title">
          <InfoCircleOutlined />
          网络信息
        </div>
      </div>
      <div className="section-content">
        <Descriptions column={1} bordered size="small">
          <Descriptions.Item label="网络描述">
            <Space>
              <FileTextOutlined style={{ color: '#1890ff' }} />
              {network.description || '暂无描述'}
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="物理地址">
            <Space>
              <EnvironmentOutlined style={{ color: '#1890ff' }} />
              {network.physicalAddress || '未指定'}
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="Tracker名称">
            {network.trackerName}
          </Descriptions.Item>
          <Descriptions.Item label="Tracker URL">
            <Space>
              <code>{network.trackerUrl}</code>
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="网络类型">
            <Tag color={network.isPublic ? 'green' : 'blue'}>
              {network.isPublic ? '公网' : '内网'}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="创建时间">
            <Space>
              <CalendarOutlined style={{ color: '#1890ff' }} />
              {formatDate(network.createdAt)}
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="成员数量">
            <Badge count={network.memberCount} showZero>
              <TeamOutlined style={{ color: '#1890ff' }} />
            </Badge>
          </Descriptions.Item>
          {userRole && (
            <Descriptions.Item label="您的角色">
              {userRole === 'admin' ? 
                <Tag color="blue" icon={<CrownOutlined />}>管理员</Tag> : 
                <Tag color="green" icon={<UserOutlined />}>成员</Tag>
              }
            </Descriptions.Item>
          )}
        </Descriptions>
      </div>
    </Card>
  );
};

export default NetworkInfoSection;